<template>
  <div>
    <el-card class="card">
      <div slot="header" class="clearfix">
        <span>{{ id?'编辑文章':'立即新增' }}</span>
      </div>
      <div class="card-main">
        <el-form ref="ruleForm" :model="Form" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-row :gutter="10">
            <el-col :span="10">
              <el-form-item label="作者" prop="author">
                <el-input v-model="Form.author" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="标题" prop="title">
                <el-input v-model="Form.title" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 是否展示 -->
          <el-form-item label="是否展示">
            <el-switch
              v-model="Form.isShow"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
          <el-form-item label="摘要">
            <el-input
              v-model="Form.summary"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入内容"
            />
          </el-form-item>
          <!-- 图片上传 -->
          <el-form-item label="封面图片">
            <el-upload
              ref="upload"
              class="upload-demo"
              action="/lejuAdmin/material/uploadFileOss"
              :on-success="uploadSuccess"
              :headers="header"
            >
              <el-button size="small" type="primary">点击上传素材</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <img :src="Form.coverImg" alt="" style="height:200px">
          </el-form-item>

          <el-form-item label="编辑文章类型">
            <el-radio-group v-model="Form.editorType" @change="changetype">
              <el-radio :label="0">富文本</el-radio>
              <el-radio :label="1">MarkDown</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 富文本 -->
          <div v-show="Form.editorType == 0">
            <el-upload
              ref="TinymceUpload"
              class="upload-demo"
              action="/lejuAdmin/material/uploadFileOss"
              :on-success="TinymceSuccess"
              :headers="header"
            >
              <el-button class="inset" size="small" type="primary">插入图片</el-button>
            </el-upload>
            <Tinymce ref="Tin" />
          </div>
          <!-- markdown -->
          <div v-show="Form.editorType == 1">
            <MarkDown ref="md" />
          </div>
          <el-row type="flex" justify="center">
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" @click="submitForm()">{{ id?'修改文章':'立即新增' }}</el-button>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getToken } from '@/utils/myAuth'
import { addArticle, productArticle, updateArticle } from '@/api/content/article'
import Tinymce from '@/components/Tinymce'
import MarkDown from '@/components/MarkdownEditor'
export default {
  components: {
    Tinymce,
    MarkDown
  },
  data() {
    return {
      id: '',
      Form: {
        author: '',
        title: '',
        summary: '',
        isShow: 0,
        coverImg: '',
        editorType: 0,
        content1: ''
      },
      rules: {
        author: [
          { required: true, message: '请输入作者姓名', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 1, max: 40, message: '长度在 1 到 40 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // 请求头
    header() {
      const token = getToken()
      return {
        token
      }
    }
  },
  created() {
    this.id = this.$route.params.id
    if (this.id) {
      this.getDetail()
    }
  },
  methods: {
    // 插入富文本图片
    TinymceSuccess(res) {
      if (res.success) {
        this.$refs.Tin.imageSuccessCBK(res.data.fileUrl)
        this.$refs.TinymceUpload.clearFiles()
      } else {
        this.$message.error('插入图片失败')
      }
    },
    uploadSuccess(res) {
      console.log(res)
      this.Form.coverImg = res.data.fileUrl
      this.$refs.upload.clearFiles()
    },
    // 获取文章详情
    getDetail() {
      productArticle(this.id).then(res => {
        console.log(res)
        this.Form = res.data.productArticle
        if (this.Form.editorType === 0) {
          this.$refs.Tin.setContent(this.Form.content1)
        } else {
          this.$refs.md.setValue(this.Form.content1)
        }
      })
    },
    // 改变编辑详情
    changetype(type) {
      this.Form.editorType = type
    },
    submitForm() {
      if (this.Form.editorType === 0) {
        this.Form.content1 = this.$refs.Tin.getContent()
      } else {
        this.Form.content1 = this.$refs.md.getHtml()
      }

      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.id) {
            updateArticle({
              id: this.id,
              ...this.Form
            }).then(res => {
              if (res.success) {
                this.$router.push({ name: 'Article' })
              } else {
                this.$message('修改失败!')
              }
            })
          } else {
            addArticle({
              ...this.Form
            }).then(res => {
              console.log(res)
              if (res.success) {
                this.$router.push({ name: 'Article' })
              } else {
                this.$message('新增文章失败')
              }
            })
          }
        } else {
          this.$message.error('请填写必要信息')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .card{
    margin: 30px;
  }
  .inset{
    margin-bottom: 10px;
  }
</style>
